<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        {{position.x}},{{position.y}}
    </div>
    <script>
        let vm = Vue.createApp({
            // 侦听器---监听某个数据之后发生变化
            // 默认情况只能浅度监听
            // 应用范围
            // 点菜1--一个用户点一次，把当前的菜单进行保存   2--当商品的数量发生变化时才进行保存
            // 1--拦截操作
            // 2--耗时操作
            data() {
                return {
                    length: 2,
                    area: 4,
                    // json对象  ==地址，堆类型的空间
                    position: {
                        x: 0, y: 0
                    },
                    r: 10
                }
            },
            computed:{
                newposition(){
                    return JSON.parse(JSON.stringify(this.position))
                }

            },
            // 侦听器
            // 监听值发生改变之后自动执行
            watch: {
                // value===长度变化之后的新值
                length(newValue, oldValue) {
                    this.area = newValue * oldValue
                    console.log(oldValue);
                },
                newposition: {
                    handler(newValue, oldValue) {
                        // 思考：为什么position坐标发生变化，没有触发事件
                        console.log('侦听器被触发  位置变为了' + newValue.x + ',' + newValue.y);
                        // console.log("原本的位置"+oldValue.x+","+oldValue.y);
                        
                        return { x: this.position.x + 1, y: this.position.y + 1 }
                    },
                    deep:true,
                    // 页面初始化时就进行侦听
                    immediate:true

                }

            }
        }).mount('#app')
        // console.log(vm.area);
        // vm.length=8;
        // console.log(vm.area);
        // vm.position.x = 3



    </script>
</body>

</html>